<extend name="base/index" />

<block name="style">
<link rel="stylesheet" type="text/css" href="__static__/Jcrop/css/jquery.Jcrop.css" media="all">
    <style>
        .webuploader-element-invisible{
			width: 0px;
		}
		#preview-pane {
		  display: block;
		  position: absolute;
		  z-index: 2000;
		  top: 10px;
		  right: 0px;
		  padding: 6px;
		  border: 1px rgba(0,0,0,.4) solid;
		  background-color: white;

		  -webkit-border-radius: 6px;
		  -moz-border-radius: 6px;
		  border-radius: 6px;

		  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
		}

		/* The Javascript code will set the aspect ratio of the crop
		   area based on the size of the thumbnail preview,
		   specified here */
		#preview-pane .preview-container {
		  width: 110px;
		  height: 110px;
		  overflow: hidden;
		}
		.upload-area {
			position: relative;
			height: 320px;
			width: 420px;
			background-color: #F5F5F5;
			border: 2px solid #E1E1E1;
			padding: 0px;
			margin: 10px;
		}
		.file-tips {
			padding-top: 20px;
			color: #A8A8A3;
			margin-left: 20px;
			/*text-align: center;*/
		}
    </style>

</block>

<block name="content">
    <div class="main">
      <div class="container">
        <ul class="breadcrumb">
            <li><a href="{:U('Home/index')}">首页</a></li>
            <li class="active">上传文档</li>
        </ul>
        <!-- BEGIN SIDEBAR & CONTENT -->
        <div class="row margin-bottom-40">
          <!-- BEGIN SIDEBAR -->
          <div class="sidebar col-md-3 col-sm-3">
			<include file="Public/user_sidebar" />
          </div>
          <!-- END SIDEBAR -->

          <!-- BEGIN CONTENT -->
          <div class="col-md-9 col-sm-9">
            <h1>上传</h1>
            <div class="content-form-page">
              <div class="row">
                <div class="col-md-9 col-sm-9">
                  <div class="form-horizontal" id="pdf_update" >
                    <fieldset>
                      <!-- <legend>上传文件</legend> -->

					<div class="form-group">
                        <div class="col-lg-12">
							<div class="input-group col-lg-12">
								<div class="upload-area col-lg-8 col-md-8">
									<div id='up_tips'>
										<div class="file-tips">支持JPG,PNG,GIF，尺寸不小于120*120</div>
										
										 <div class="preview hidden" id="preview-hidden"></div>
										
										 <button type="button" id="filebtn" style="margin-left: 20px;margin-top: 20px;" class="btn blue">上传头像 </button>
									</div>
								</div>
								
								<div id="preview-pane">
									<div class="preview-container">
									  <img src="" id="covimg" class="jcrop-preview" alt="Preview" />
									</div>
								</div>

							</div>
                        </div>
                      </div>
                    </fieldset>
                    <div class="row">
                      <div class="col-lg-6 col-md-offset-4 padding-left-0 padding-top-20">                        
                        <button type="submit" id="btnup" class="btn blue btn-block">提交</button>
                        <!-- <button type="button" class="btn btn-default">取消</button> -->
                      </div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
          <!-- END CONTENT -->
        </div>
        <!-- END SIDEBAR & CONTENT -->
      </div>
    </div>

</block>
<block name="script">
	<script src="__assets__/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
	<script type="text/javascript">
        jQuery(document).ready(function() {
            Layout.init();
            Layout.initUniform();
            Layout.initTwitter();
			//提交裁剪好的图片
				$('#btnup').click(function(){
					postxy();
				});
        });
    </script>
	<script src="__static__/Webuploader/webuploader.js" type="text/javascript"></script>
	<script src="__static__/Jcrop/js/jquery.Jcrop.min.js" type="text/javascript"></script>
	
	
	<script type="text/javascript">


		 
		// 实例化
        imguploader = WebUploader.create({
            pick: '#filebtn',
			auto: true,

            dnd: '#filebtn',
            paste: '#filebtn',
            swf: '__static__/Uploader.swf',

            server: '{:U('Home/Update/img')}',
			formData:{
				uid : {:session('user_auth.uid')},
			},
			accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,png',
                mimeTypes: 'image/*'
            },
			/*
			thumb:{
				width:300,
				height:300,
			}
			*/
        });
		
		//添加队列
		imguploader.on('fileQueued', function(file){
			//alert(file);
			//绑定需要裁剪的图片

				
			var imgs = $('#covimg');
			imguploader.makeThumb(file,function(error,src){
				if(error){
					imgs.replaceWith('<span>NO</span>');
					return;
				}
				imgs.attr('src',src);
				
			});
			
		});
		
		//上传成功 
		imguploader.on('uploadSuccess', function(file,response){
			$('#pdf_update').append('<input type="hidden" name="img_url" value="'+ response.url +'">');
			$('#pdf_update').append('<input type="hidden" name="img_id" value="'+ response.fileid +'">');
			$('.upload-area').replaceWith('<img class="upload-area" id="cropbox" src="'+response.url+'"/>');
			$('#covimg').attr('src',response.url)

			inintjcrop();
			$('#imgbtn').text('重新上传');
			$('#imghelp').text('上传成功');
		});
		
		//上传状态
        imguploader.onUploadProgress = function( file, percentage ) {
            $('#imgbtn').text( percentage * 100 + '%');
			$('#imghelp').val(file.name + '上传中:' + percentage * 100 + '%' );
        };
		
		var crop;
        var jcrop_api,boundx,boundy;
		$pcnt = $('.preview-container'),
        $pimg = $('.preview-container img'),
		xsize = $pcnt.width(),
        ysize = $pcnt.height()
		
		function inintjcrop(){
				$('#cropbox').Jcrop({
				  onChange: updateCoordinate,
				  onSelect: updateCoordinate,
				  aspectRatio: 1
				},function(){
				  // Use the API to get the real image size
				  var bounds = this.getBounds();
				  boundx = bounds[0];
				  boundy = bounds[1];
				  // Store the API in the jcrop_api variable
				  jcrop_api = this;

				  // Move the preview into the jcrop container for css positioning
				  $preview.appendTo(jcrop_api.ui.holder);
				});
		}
		
		function updateCoordinate(c){	
					 crop = c;
					 showPreview(c);
		}
		//预览图
		function showPreview(c){
			//alert("showPreview");
			
			if (parseInt(c.w) > 0)
			{
				var rx = xsize / c.w;
				var ry = ysize / c.h;

				$pimg.css({
				  width: Math.round(rx * boundx) + 'px',
				  height: Math.round(ry * boundy) + 'px',
				  marginLeft: '-' + Math.round(rx * c.x) + 'px',
				  marginTop: '-' + Math.round(ry * c.y) + 'px'
				});
			}
			console.log('width,' + Math.round(rx * boundx) + 'px');
			console.log('height,' + Math.round(ry * boundy) + 'px');
			console.log('marginLeft,' + '-' + Math.round(rx * c.x) + 'px');
			console.log('marginTop,' + '-' + Math.round(ry * c.y) + 'px');
			//  console.log(c.y + ',' + c.x);
		}
		//提交裁剪好的图片
		
		function postxy(){
			var img_id = $("input[name='img_id']").val();
						
						if(img_id == ''){
							
							console.log('请先上传图片！');
						}else{

							var cropurl="__SELF__";

							var crop2 = crop.x  + ',' + crop.y  + ',' + crop.w  + ',' + crop.h ;
								

							$.post(cropurl, {img_id:img_id,crop: crop2}, function (data) {
							   
								console.log('图片！');
								if (data.success) {
									console.log('success');
									//location.reload();
									
								} else {
									
									console.log('error');
								}
							});
						}
		}

	</script>
</block>